<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 使用vue 实现的数据双向绑定效果 -->
        <p>{{username}}</p>
        <input type="text" v-model="username">

        <!--  -->
        <p></p>
        <input type="text">
    </div>
</body>

</html>
<script>
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                message1: 'Hello',
                username: '小岳岳'
            }
        }
    }).mount('#app')


    //  原生js 实现一下
    // Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

    const obj1 = { age: 10 };
    // 语法:   Object.defineProperty(要操作的对象,操作的对象属性,配置对象为该属性的描述符)
    Object.defineProperty(obj1, 'name', {
        // value: 100,
        // writable: true // 定义当前的name 是否可以被修改 , 默认false, true 可以修改
        //configurable: false, // 定义该name ,是否可以被删除 为true 可以删除,默认为false
        // enumerable: false // 描述该name 属性是否可以遍历 默认为false . 为true 可以遍历


    })

    // obj1.name = '贾玲'
    // obj1.age = 20
    // 删除对象上某一个属性
    // delete obj1.age
    // delete obj1.name

    // 遍历对象属性
    // for (let key in obj1) {
    //     console.log(key + '---' + obj1[key]);
    // }


    console.log(obj1);

</script>